﻿<!DOCTYPE html>
<html>
	<head>
		<meta chaset="utf-8" />
		<title>画板测试案例</title>
		<script type="text/javascript" src="../../jquery-1.7.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas = $("#canvas");
			var context = canvas.get(0).getContext("2d");
			
			context.fillRect(40,40,100,100);
			
			context.beginPath();
			context.arc(230,90,50,0,Math.PI*2,false);
			context.closePath();
			context.fill();
			
			$("#clearCanvas-1").click(function(){
				context.clearRect(0,0,canvas.width(),canvas.height());
			});
			$("#clearCanvas-2").click(function(){
				context.clearRect(40,40,100,100);
			});
			$("#clearCanvas-3").click(function(){
				context.clearRect(180,40,100,100);
			});
			$("#clearCanvas-4").click(function(){
				context.clearRect(230,90,50,50);
			});
		});
		</script>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
			<h1>对不起，您的浏览器不支持CANVAS。请更新最新的浏览器。</h1>
		</canvas>
		<hr/>
		<input type="button" id="clearCanvas-1" value="清除全部画板" />
		<input type="button" id="clearCanvas-2" value="清除正方形" />
		<input type="button" id="clearCanvas-3" value="清除圆形" />
		<input type="button" id="clearCanvas-4" value="切除圆的一部分" />
	</body>
</html>